<template>
    <el-tabs type="border-card" @tab-click="changeTabs">
        <el-tab-pane label="库存量">
            <div id="myEcharts" :style="{ width: '100%', height: '300px' }"></div>
        </el-tab-pane>
        <el-tab-pane label="每日销售量">
            <div id="myEcharts2" :style="{ width: '100%', height: '300px' }"></div>
        </el-tab-pane>

        <el-tab-pane label="分类占比">
            <div id="myEcharts3" :style="{ width: '100%', height: '500px'}"></div>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted} from 'vue'
import * as echarts from "echarts";
import {bulletinBoardApi} from '@/api/index'
/// 声明定义一下echart
let echart = echarts;
onMounted(() => {
    bulletinBoardApi.select.call().then((res: any) => {
        console.log(res)
        initChart(res);
    })
});

const showSale = () => {

    bulletinBoardApi.select_sale.call().then((res: any) => {
        initChart2(res)
    })
}

const showProportion = () => {
    bulletinBoardApi.select_prop.call().then((res: any) => {
        initChart3(res);
    })
}

onUnmounted(() => {
    echart.dispose;
});

// 基础配置一下Echarts
const initChart = (data: any) => {
    let chart = echart.init(document.getElementById("myEcharts"), "vintage");
    // 把配置和数据放这里

    let option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['商品库存量', '销量']
        },

        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisLabel: {
                    rotate: -30, // 倾斜30度<<<<<-----复制这里----------
                    interval: 0,
                    textStyle: {
                        color: "#AAA",
                        fontSize: "11",
                    },
                    formatter: function (name: string) {
                        return (name.length > 8 ? (name.slice(0, 8) + "...") : name);
                    },
                },
                offset: 6,
                data: Array.from(data, ({name, qty}) => name)
            },

        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '商品库存量',
                type: 'bar',
                data: Array.from(data, ({name, qty}) => qty),

            },
            {
                name: '销量',
                type: 'bar',
                data: Array.from(data, ({name, qty}) => qty + Math.random() * 10),

            },

        ]
    };
    chart.setOption(option);
    window.onresize = function () {
        //自适应大小
        chart.resize();
    };
}


const initChart2 = (data: any) => {
    let chart = echart.init(document.getElementById("myEcharts2"), "vintage");
    // 把配置和数据放这里


    let option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['销售量']
        },

        xAxis: {
            type: 'category',
            data: Array.from(data, ({date, count}) => date)
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '销售量',
                data: Array.from(data, ({date, count}) => count),
                type: 'line'
            }
        ]
    };
    chart.setOption(option);
    window.onresize = function () {
        //自适应大小
        chart.resize();
    };
}


const initChart3 = (data: any) => {
    let chart = echart.init(document.getElementById("myEcharts3"), "vintage");
    // 把配置和数据放这里

    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data
            }
        ]
    };
    chart.setOption(option);
    window.onresize = function () {
        chart.resize();
    };
}


const changeTabs = (pane: any, ev: any) => {
    if (pane.props.label == '每日销售量') {
        showSale()
    }
    if (pane.props.label == '分类占比') {
        showProportion()
    }

}


</script>